<template>
  <transition name="mask-fade" v-show="visible">
    <div class="modal-mask" @click="clickOnMask">
      <transition name="slide-up" appear>
        <a-card
          :bordered="bordered"
          :style="{
            width: typeof width === 'number' ? `${width}px` : '600px',
          }"
          :class="centered ? 'centered' : ''"
          v-if="visible"
          class="modal-container"
          @click.stop=""
        >
          <template #title v-if="header">
            <div class="modal-header">
              <slot name="header">
                <h4 style="margin: 0">{{ title }}</h4>
                <a-button
                  size="small"
                  type="text"
                  @click="handleCancel"
                  v-if="showCloseBtn"
                >
                  <template #icon>
                    <CloseOutlined />
                  </template>
                </a-button>
              </slot>
            </div>
          </template>

          <div class="modal-body">
            <slot name="default"></slot>
          </div>
          <div class="modal-footer" v-if="footer">
            <slot name="footer">
              <a-button
                danger
                type="primary"
                style="margin-right: 10px"
                @click="handleCancel"
              >
                取消
              </a-button>
              <a-button type="primary" @click="handleOk"> 确认 </a-button>
            </slot>
          </div>
        </a-card>
      </transition>
    </div>
  </transition>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";
import { useSystemConfig } from "@/store/systemConfig";
import { ClearOutlined, CloseOutlined } from "@ant-design/icons-vue";

const systemConfig = useSystemConfig();

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  closeOnOverlay: {
    type: Boolean,
    default: true,
  },
  showCloseBtn: {
    type: Boolean,
    default: true,
  },
  bordered: {
    type: Boolean,
    default: true,
  },
  header: {
    type: Boolean,
    default: true,
  },
  footer: {
    type: Boolean,
    default: true,
  },
  visible: {
    type: Boolean,
    default: false,
  },
  width: {
    type: [String, Number],
    default: "50%",
  },
  centered: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["ok", "cancel", "update:visible"]);

const handleOk = () => {
  emit("ok");
  emit("update:visible", false);
};

const handleCancel = () => {
  emit("cancel");
  emit("update:visible", false);
};

const clickOnMask = () => {
  if (props.closeOnOverlay) {
    handleCancel();
  }
};
</script>

<style scoped>
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mask-fade-enter-active,
.mask-fade-leave-active {
  transition: opacity 0.2s ease;
}

.mask-fade-enter-from,
.mask-fade-leave-to {
  opacity: 0;
}

.modal-footer {
  text-align: right;
}

.cancel-btn {
  background: #f5f5f5;
}

.confirm-btn {
  background: #1890ff;
  color: white;
}
.modal-mask .slide-up-enter-active,
.modal-mask .slide-up-leave-active {
  transition:  0.2s ease;
}

.modal-mask .slide-up-enter-from,
.modal-mask .slide-up-leave-to {
  transform: translateY(-160px);
  opacity: 0;
}

.modal-mask .scale-enter-active,
.modal-mask .scale-leave-active {
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-mask .scale-enter-from,
.modal-mask .scale-leave-to {
  scale: 0;
  opacity: 0;
}
</style>